<template>
  <el-row class="liverow">
    <el-col :span="24">
      <div class="media-header">
        <div>
          <span  class="card-header" style="display:inline-block;">直播间信息</span>
          <!--<a href="javascript:;" v-if="mediaInfo.inuse == 1" @click="handleStopMedia">
            <el-tag type="danger" size="small">紧急停播</el-tag>
          </a>-->
        </div>
        <div align="right">
          <el-button type="primary" size="mini" @click="handleReviewLiveRoom">直播间预览</el-button>
        </div>
        <div v-if="currentCorpid == mediaInfo.corpid" class="control-edit">
          <el-button type="primary" v-if="!isedit" @click="handleUpdateMedia" :disabled="mediaInfo.state == 1">
            <span v-if="mediaInfo.state == 1">审核中</span>
            <span v-else>编辑</span>
          </el-button>
          <el-button type="primary" v-else @click="handleCancelUpdateMedia">取消<br/>编辑</el-button>
        </div>
      </div>
    </el-col>
    <!-- <el-divider /> -->
    <el-col :span="24">
      <ul class="mediainfo">
        <li>
          <span>直播间名称：</span>
          <span v-show="isedit">
            <el-input
                    placeholder="标题长度30字以内"
                    v-model.trim="mediaInfo.name"
                    class="input-w"
                    size="mini"
                    :minlength="2"
                    :maxlength="30"
                    :show-word-limit="true"
            />
          </span>
          <span v-show="!isedit">{{mediaInfo.name}}</span>
        </li>
        <li>
          <span>英文名称：</span>
          <span v-show="isedit">
            <el-input placeholder="请输入直播间英文名称" v-model.trim="mediaInfo.enname" class="input-w" size="mini" />
          </span>
          <span v-show="!isedit">{{mediaInfo.enname ? mediaInfo.enname : '--'}}</span>
        </li>
        <li>
          <span>媒资ID：</span>
          <span>{{mediaInfo.mediaid}}</span>
        </li>
        <li>
          <span>媒资类型：</span>
          <span>直播间</span>
        </li>
        <li>
          <span>一级分类：</span>
          <span v-show="isedit">
            <el-select placeholder="请选择一级分类"
                       v-model="mediaInfo.catid"
                       size="mini"
                       class="input-w"
                       @change="getSubCategoryList"
            >
              <el-option
                v-for="cate in categoryList"
                :key="cate.catid"
                :label="cate.name"
                :value="cate.catid"
              />
            </el-select>
          </span>
          <span v-show="!isedit">
            {{mediaInfo.catname}}
          </span>
        </li>
        <li>
          <span>二级分类：</span>
          <span v-show="isedit">
            <el-select placeholder="请选择二级分类" v-model="mediaInfo.subcatids" multiple size="mini" class="input-w">
              <el-option
                v-for="subCate in subCategoryList"
                :key="subCate.subcatid"
                :label="subCate.name"
                :value="subCate.subcatid"
              />
            </el-select>
          </span>
          <span v-show="!isedit">
            <span v-if="mediaInfo.subcatnames && mediaInfo.subcatnames.length > 0">
                  {{mediaInfo.subcatnames.join('、')}}
                </span>
          </span>
        </li>
        <li>
          <span>直播间标签：</span>
          <span v-show="isedit">
            <el-tag
                    v-for="(tag, index) in mediaInfo['tags']"
                    :key="tag + index"
                    closable
                    size="mini"
                    class="mr10"
                    @close="handleDeleteTag(tag)"
            >{{tag}}</el-tag>
            <el-input placeholder="请输入媒资标签" v-if="editTagVisible" size="mini" clearable ref="tagInputRef" @keyup.enter="handleAddTag" v-model="tagValue" @blur="handleAddTag" class="input-w"></el-input>
            <el-button v-else class="button-new-tag ml-1" size="small" @click="handleEditTag">
              + 添加标签
            </el-button>
          </span>
          <span v-show="!isedit">
            <el-tag v-for="(tag, index) in mediaInfo['tags']" :key="tag + index" size="mini" class="mr10">{{tag}}</el-tag>
          </span>
        </li>
        <li>
          <span>初始点赞数：</span>
          <span v-show="isedit">
             <span v-if="mediaInfo['extends']">
                <el-input placeholder="请输入初始点赞数" v-model.number="mediaInfo['extends']['initlikeno']" size="mini" class="inzan" style="width: 50px;"/>
              </span>
          </span>
          <span v-show="!isedit">
            {{(mediaInfo['extends'] && mediaInfo['extends']['initlikeno']) ? mediaInfo['extends']['initlikeno'] : 0}}
          </span>
        </li>
        <li>
          <span>初始观看数：</span>
          <span v-show="isedit">
             <span v-if="mediaInfo['extends']">
                <el-input placeholder="请输入初始点赞数" v-model.number="mediaInfo['extends']['initviewno']" size="mini" class="inzan" style="width: 50px;"/>
              </span>
          </span>
          <span v-show="!isedit">
            {{(mediaInfo['extends'] && mediaInfo['extends']['initviewno']) ? mediaInfo['extends']['initviewno'] : 0}}
          </span>
        </li>
        <li>
          <span>初始在线数：</span>
          <span v-show="isedit">
             <span v-if="mediaInfo['extends']">
                <el-input placeholder="请输入初始点赞数" v-model.number="mediaInfo['extends']['initonlineno']" size="mini" class="inzan" style="width: 50px;"/>
              </span>
          </span>
          <span v-show="!isedit">
            {{(mediaInfo['extends'] && mediaInfo['extends']['initonlineno']) ? mediaInfo['extends']['initonlineno'] : 0}}
          </span>
        </li>
        <li>
          <span>直播间来源：</span>
          <span v-if="currentCorpid == mediaInfo.corpid">自有媒资</span>
          <span v-else>
              <span v-if="corpPartnerKeyValue[mediaInfo.corpid] !== undefined">{{corpPartnerKeyValue[mediaInfo.corpid]}}</span>
              <span v-else>--</span>
            </span>
        </li>
        <li>
          <span>展示视频名称：</span>
          <span v-show="!isedit">
            {{mediaInfo['extends'] && mediaInfo['extends']['ifshowseriesname'] > 0 ? '是' : '否'}}
          </span>
          <span v-show="isedit">
            <span v-if="mediaInfo['extends']">
              <el-radio-group v-model="mediaInfo['extends']['ifshowseriesname']" size="mini">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </span>
          </span>
        </li>
        <li>
          <span>内容提供方：</span>
          <span v-if="mediaInfo.cpname">{{mediaInfo.cpname}}</span>
          <span v-else>无</span>
        </li>
        <li>
          <span>内容来源ID：</span>
          <span v-if="mediaInfo.sourceid">{{mediaInfo.sourceid}}</span>
          <span v-else>无</span>
        </li>
        <li>
          <span>来源企业ID：</span>
          <span>{{mediaInfo.corpid}}</span>
        </li>
        <li>
          <span>创建账号ID：</span>
          <span>{{mediaInfo.uid}}</span>
        </li>
        <li>
          <span>创建时间：</span>
          <span>{{mediaInfo.ctime ? mediaInfo.ctime.replace('T', ' ') : '--'}}</span>
        </li>
        <li>
          <span>付费类型：</span>
          <span v-show="!isedit">
            <span v-if="mediaInfo.paytype == 1" style="color: #F56C6C">付费</span>
            <span v-else style="color: #67C23A">免费</span>
          </span>
          <span v-show="isedit">
            <el-switch
              v-model="mediaInfo.paytype"
              inline-prompt
              active-text="付费"
              inactive-text="免费"
              active-color="#F56C6C"
              inactive-color="#67C23A"
              :active-value="1"
              :inactive-value="0"
              @change="handleChangePaidState"
            />
          </span>
        </li>
        <li>
          <span>直播间简介：</span>
          <span v-show="isedit">
            <el-input  style="width:350px" type="textarea" :rows="6" placeholder="请输入直播间简介" v-model.trim="mediaInfo.abstract" />
          </span>
          <span v-show="!isedit" style="width:350px">{{mediaInfo.abstract}}</span>
        </li>
        <li>
          <span>直播间详情：</span>
          <span v-show="isedit">
             <el-input type="textarea" :rows="6" placeholder="请输入媒资详细信息" v-model.trim="mediaInfo.content" style="width:350px"/>
          </span>
          <span v-show="!isedit" style="width:350px">{{mediaInfo.content}}</span>
        </li>
      </ul>
    </el-col>
    <el-col :span="24" class="mt15 mb15" v-if="isedit">
      <div align="middle" >
        <el-button size="large" type="primary" @click="handleSaveUpdateMedia">保存修改结果</el-button>
      </div>
    </el-col>
  </el-row>
  <!-- <el-divider border-style="dashed"></el-divider> -->
  <!-- 直播间付费套餐列表 -->
  <paid-package
          v-if="mediaInfo.paytype == 1"
          ref="paidPackageRef"
          :isedit="isedit"
          :current-corpid="currentCorpid"
          :data-info="mediaInfo"
  />
  <!-- 加载图片介质组件 -->
  <el-row>
    <el-col :span="24" v-if="mediaInfo">
      <image-medium
        ref="imageMediumRef"
        :isedit="isedit"
        rel-type="media"
        :current-corpid="currentCorpid"
        :data-info="mediaInfo"
        :enabled-edit-image="true"
        @reloadMediaData="getMediaData"
        @handleVideoPlay="handleVideoPlay"
      />
    </el-col>
  </el-row>
  <!-- <el-divider border-style="dashed"></el-divider> -->
  <!-- 加载关联商品组件 -->
  <el-row class="mb10">
    <el-col :span="24" v-if="mediaInfo">
      <media-goods
        ref="mediaGoodsRef"
        rel-type="media"
        :data-info="mediaInfo"
        :current-corpid="currentCorpid"
        :isedit="isedit"
      />
    </el-col>
  </el-row>
  <!-- 加载子集列表组件 -->
  <!-- <el-divider border-style="dashed"></el-divider> -->
  <el-row>
    <el-col :span="24">
      <live-room-series
              ref="liveRoomSeriesRef"
              v-if="mediaInfo"
              :data-info="mediaInfo"
              :current-corpid="currentCorpid"
              :query="query"
              :isedit="isedit"
              @handleVideoPlay="handleVideoPlay"
      />
    </el-col>
  </el-row>
  <!-- 直播间预览 -->
  <component
          :is="LiveRoomReviewComponent"
          :title="liveroomReviewTitle"
          :visible="liveroomReviewVisible"
          :toDialogData="liveroomReviewData"
          :key="liveroomReviewKey"
          @cancelDialog="cancelDialog"
  />
</template>
<script>
  import {reactive, ref, nextTick, defineAsyncComponent} from 'vue'
  import {useStore} from 'vuex'
  import {getMediaInfo, mediasOnOff} from "@/api/media/media";
  import corpPartnerMixin from "@/mixins/corpPartnerMixin";
  import {getCategories, getSubCategories} from "@/api/media/constant";
  import {editMedia} from "@/api/media/media";
  import {ElMessage, ElMessageBox} from 'element-plus'
  import ImageMedium from "./ImageMedium";
  import MediaGoods from "./MediaGoods";
  import LiveRoomSeries from "./LiveRoomSeries/index"
  import PaidPackage from "./PaidPackage";

  export default {
    name: 'LiveRoomMedia',
    components: {
      ImageMedium,
      MediaGoods,
      LiveRoomSeries,
      'LiveRoomReview': defineAsyncComponent(() => import('../LiveRoomReview')),
      PaidPackage
    },
    props: {
      query: {
        type: Object,
        required: true
      }
    },
    emits: ['handleVideoPlay'],
    setup(props, context) {
      const store = useStore()
      const currentCorpid = store.getters.corpinfo.corpid
      const mediaInfo = reactive({})
      const isedit = props.query.isedit == 1 ? ref(true) : ref(false)
      const categoryList = ref([])
      const subCategoryList = ref([])
      const editTagVisible = ref(false)
      const tagValue = ref('')
      const tagInputRef = ref(null)
      const { corpPartnerKeyValue } = corpPartnerMixin({partnertype:0})
      const imageMediumRef = ref(null)
      const mediaGoodsRef = ref(null)
      const liveRoomSeriesRef = ref(null)
      /** 直播间预览相关参数开始 **/
      const liveroomReviewVisible = ref(false)
      const liveroomReviewTitle = ref('')
      const liveroomReviewKey = ref(Number)
      const liveroomReviewData = reactive({})
      const LiveRoomReviewComponent = ref(null)
      /** 直播间预览相关参数结束 **/
      const paidPackageRef = ref(null)

      /** 获取媒资详情 **/
      const getMediaData = () => {
        getMediaInfo({mediaid: props.query.mediaid}).then(response => {
          if (response.errcode == 0) {
            Object.assign(mediaInfo, response.data)
            if (mediaInfo.state == 1) {
              isedit.value = false
            }
            nextTick(() => {
              imageMediumRef.value.init()
              mediaGoodsRef.value.init()
              liveRoomSeriesRef.value.init()
              if (mediaInfo.paytype == 1) {
                paidPackageRef.value.init()
              }
            })
            getCategoryList()
          }
        })
      }
      /** 切换成媒资编辑状态 **/
      const handleUpdateMedia = () => {
        isedit.value = true
      }
      /** 取消媒资的编辑状态 **/
      const handleCancelUpdateMedia = () => {
        isedit.value = false
        getMediaData()
        /*nextTick(() => {
          liveRoomSeriesRef.value.getSeriesList()
        })*/
      }
      /** 添加标签 **/
      const handleAddTag = () => {
        if (tagValue.value) {
          if (!mediaInfo.tags.includes(tagValue.value)) {
            mediaInfo.tags.push(tagValue.value)
          }
        }
        editTagVisible.value = false
        tagValue.value = ''
      }
      /** 删除标签 **/
      const handleDeleteTag = (tag) => {
        const index = mediaInfo.tags.findIndex(d => d == tag)
        mediaInfo.tags.splice(index, 1)
      }
      /** 编辑标签 **/
      const handleEditTag = () => {
        editTagVisible.value = true
        nextTick(() => {
          tagInputRef.value.focus()
        })
      }
      /** 获取媒资一级分类 **/
      const getCategoryList = () => {
        getCategories({mediatype: props.query.mediatype}).then(response => {
          if (response.errcode == 0) {
            categoryList.value = response.data.list
            getSubCategoryList()
          }
        })
      }
      /** 获取媒资二级分类 **/
      const getSubCategoryList = () => {
        getSubCategories({catid: mediaInfo.catid}).then(response => {
          if (response.errcode == 0) {
            subCategoryList.value = response.data.list
          }
        })
      }
      /** 保存媒资修改信息 **/
      const handleSaveUpdateMedia = () => {
        if (!mediaInfo.name) {
          ElMessage({type: 'warning', message: '直播间名称不能为空', duration: 2000})
        } else {
          if (mediaInfo.paytype == 1 && paidPackageRef.value.tableData.length <= 0) {
            ElMessage({type: 'warning', message: '请先添加媒资付费套餐', duration: 2000})
          } else {
            editMedia(mediaInfo).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
              }
            })
          }
        }
      }
      /** 视频播放 **/
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }
      /** 紧急停播 **/
      const handleStopMedia = () => {
        ElMessageBox.confirm('确定要紧急停播直播间 ' + mediaInfo.name + ' 吗？', '直播间紧急停播', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          mediasOnOff({inuse: 0, mediaids: [mediaInfo.mediaid], comments: '紧急停播'}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: '媒资已停播', duration: 2000})
              getMediaData()
            }
          })
        }).catch(() => {})
      }
      /** 直播间预览 **/
      const handleReviewLiveRoom = () => {
        Object.assign(liveroomReviewData, mediaInfo)
        LiveRoomReviewComponent.value = 'LiveRoomReview'
        liveroomReviewTitle.value = '直播间 ' + mediaInfo.name + ' 预览'
        liveroomReviewKey.value = new Date().getTime()
        liveroomReviewVisible.value = true
      }
      /** 关闭直播间预览 **/
      const cancelDialog = () => {
        liveroomReviewVisible.value = false
      }

      // 切换付费状态
      const handleChangePaidState = (val) => {
        if (val == 1) {
          nextTick(() => {
            paidPackageRef.value.init()
          })
        }
      }

      getMediaData()

      return {
        getMediaData,
        mediaInfo,
        currentCorpid,
        isedit,
        handleUpdateMedia,
        handleCancelUpdateMedia,
        categoryList,
        subCategoryList,
        editTagVisible,
        tagValue,
        tagInputRef,
        handleAddTag,
        handleDeleteTag,
        handleEditTag,
        corpPartnerKeyValue,
        handleSaveUpdateMedia,
        getSubCategoryList,
        imageMediumRef,
        handleVideoPlay,
        mediaGoodsRef,
        liveRoomSeriesRef,
        handleStopMedia,
        handleReviewLiveRoom,
        liveroomReviewTitle,
        liveroomReviewVisible,
        liveroomReviewKey,
        cancelDialog,
        liveroomReviewData,
        LiveRoomReviewComponent,
        paidPackageRef,
        handleChangePaidState
      }
    }
  }
</script>
<style lang="scss">
  .liverow{position:relative;}
  .media-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .control-edit{
      position: fixed;
      bottom:30px;
      right:30px;
      z-index: 1000;
      .el-button{
        width:80px;
        height:80px;
        padding:12px 10px;
        border-radius: 50%;
        font-size: 16px;
      }
    }
  }
  .card-header{
    font-size: 18px;
    //display: inline-block !important;
    font-weight: bold;
    margin-right: 10px;
  }

  .mediainfo{
    display: flex;
    flex-wrap: wrap;
    li {
      display:flex;
      margin-bottom: 10px;
      width: 50%;
      font-size: 12px;
      //line-height:18px;
      span{
        display: inline-block;
        color:#333;
      }
      >span:first-child{
        width:85px;
        color:#999;
      }
      >span:last-child{
        width:80%;
      }
      .el-input,.el-button{
        margin-top: -5px;
      }
      .el-select--mini{
        .el-input__suffix-inner{
          margin-top: 7px;
        }
      }
    }
  }
  .inzan{
    .el-input__inner{
      padding: 0 5px;
    }
  }
</style>
<style scoped>

</style>
